<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/documentMyReady.js"></script>
    <script>
        'use strict';
        (function(){
            var data = [
                {name:'首页', url:'/index.html', id: 1},
                {name:'关于', url:'/about.html', id: 2},
                {name:'产品', url:'/product.html', id: 3},
                {name:'案例', url:'/case.html', id: 4},
                {name:'联系', url:'/contact.html', id: 5}
            ];
            var loadMenu = function(){
                //字符串拼接的方式，一次插入减少dom遍历带来的效率问题
                var ulEle = document.getElementsByClassName('menu')[0];
                var dataLength = data.length;
                //用数组push接收，最后再join 这样效率更高
                var strArr = [];
                for(let i = 0; i < data.length; i ++){                  
                    strArr.push(`<li id = 'menu${ data[i].id }'><a href = '${ data[i].url }'>${ data[i].name }</a></li>`);
                }
                ulEle.innerHTML = strArr.join('');           
            }
            //main
            document.myReady(function(){           
            //初始化菜单数据
                loadMenu();
            });
        }.call(this))       
    </script>
</head>
<body>
    <ul class="menu"></ul>
</body>
</html>